<template>
  <section class="payRule">
    <el-row :span="24" class="action-bar" >
      <el-button type="primary" size="medium" @click="newRule">新增</el-button>
    </el-row>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55"/>
			<el-table-column type="index" width="60"/>
			<!-- <el-table-column prop="number" label="编号" width="120"/> -->
			<el-table-column prop="name" label="名称" width="160"/>
			<el-table-column prop="money" label="估价" width="100"/>
			<el-table-column prop="donor" label="捐赠者" width="80"/>
      <el-table-column prop="at_time" label="捐赠时间" width="120"/>
      
      <el-table-column prop="remark" label="捐赠说明" width="120"/>
      <el-table-column prop="status" label="转换固定资产" width="120">
        <template slot-scope="scope">
          <div style="display:flex;justify-content:center">
            <el-button type="primary" size="mini" @click="donateChangeFixedAssets(scope.row.id)" v-show="scope.row.is_change==0">转换</el-button>
            <el-button type="info" size="mini" disabled v-show="scope.row.is_change==1">已转换</el-button>
          </div>
        </template>
      </el-table-column>
			<el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <!-- <el-button type="primary" size="mini" @click="editorRule">编辑</el-button> -->
          <el-button type="danger" size="mini"  @click="deleteDonateRecord(scope.row.id)">删除</el-button>
        </template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
        <el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
      </div>
    </el-col>

    <!-- 弹出的编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      height="50%"
      center
      :title="dialogTit"
      class="editor-dialog"
      @close="initData"
      >
      <el-form :label-position="'left'" label-width="80px"  >
        <el-form-item label="名称">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="估价">
          <el-input v-model="addForm.price" type="number"></el-input>
        </el-form-item>
        <!-- <el-form-item label="捐赠者" prop="sex">
            <el-radio-group v-model="addForm.is_vip" >
              <el-radio class="radio" :label="1">商会内部会员</el-radio>
              <el-radio class="radio" :label="0">非商会内部会员</el-radio>
            </el-radio-group>
          </el-form-item> -->
        <el-form-item label="捐赠者">
					<el-select
					v-model="addForm.person"
					filterable
					remote
					:loading="loading"
					placeholder="请输入会员名"
					:remote-method="searchName"
          style="width:300px"
						>
					<el-option
						v-for="item in vipList"
						:key="item.id"
						:label="item.realname"
						:value="item.id">
            <template slot-scope="scope">
              <div>
                姓名:{{item.realname}}&nbsp;&nbsp;&nbsp;&nbsp; <span v-show="item.vip_name">职位:{{item.vip_name}}</span>
              </div>
            </template>
					</el-option>
				</el-select>
				<!-- <el-button size="medium " type="primary" @click="addExecutor">添加</el-button>
				<div v-for="(item,index) of executorList" :key="index" class="executorList">
					<div>
						<span>姓名：{{item.realname}}</span>
						<span>会员等级：{{item.vip_name}}</span>
						<span>电话号码: {{item.phone}}</span>
						<i class="el-icon-remove"  @click.stop="deleteExecutor(index)"></i>
					</div>
				</div> -->
				</el-form-item>
        <!-- <el-form-item label="捐赠者" v-if="addForm.is_vip==0">
          <el-input v-model="executor"></el-input>
        </el-form-item> -->
        <el-form-item label="捐赠时间">
          <el-date-picker 
            value-format="yyyy-MM-dd HH:mm:ss"
             type="date"
              placeholder="选择日期"
               v-model="addForm.donateTime"
               >
               </el-date-picker>
        </el-form-item>
        <el-form-item label="捐赠说明" prop="level" width="100px">
              <el-input
              type="textarea"
              :rows="5"
					    :autosize="{minRows:5}"
              placeholder="请输入内容"
              v-model="addForm.desc">
            </el-input>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="dialogVisible = false">取消</el-button> -->
        <el-button type="primary" @click="addDonateRecord">提交</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
	data(){
		return {
			users:[],
      dialogTit:'',
      dialogVisible:false,//编辑状态的弹窗
      addForm:{//弹窗的信息
        name:'',
        price:'',//估价
        // is_vip:1,//是否是商会内部
        person:'',//捐赠人
        donateTime:'',//捐赠时间
        desc:'',
      },
      loading:false,
      // executor:'',
      // executorList:[],
      vipList:[],//搜索到的执行人
      page:1,
      donationStatus:[{label:'是',value:'1'},{label:'否',value:'0'}],
			totalPage:0,//总页数
		}
  },
  // computed: {
	// 	executorIdList:function(val){
	// 		const list = this.executorList;
	// 		const newList=	list.map(item=>{
	// 			return item.user_id
	// 		})
	// 		return newList
	// 	}
	// },
  methods: {
    async donateChangeFixedAssets(id){
      const judge= this.$confirm('转换为固定资产?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.donateChangeFixedAssets({id});
					if(res.data.level=='success'){
						this.donateList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    columnChange(e){
      //选中筛选类别
      this.dropColumnName=e
    },
     newRule(){
      //新增
      this.dialogTit='添加'
      this.dialogVisible = true
    },
    editorRule(){
      this.dialogTit='编辑'
      this.dialogVisible = true
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    },
  //   	getExecutor(e){
	// 	this.executor=e;
	// },
	// addExecutor(){
  //     //添加执行者
	// 		if(isNaN(this.executor) || this.executor===''){
	// 			return
	// 		}
	// 		this.executorList.push(this.vipList[this.executor]);
	// 		this.executor='';
	// 	},
	// deleteExecutor(index){
	// 	//删除执行者
	// 	this.executorList.splice(index,1);
	// },
	async searchName(name){
    //搜索用户名
    this.loading=true;
    if(!name){
      this.vipList=[];
      this.loading=false
      return
    }
    const res=await this.$api.getUserVipList ({
      page:0,
      pagesize:16,
      realname:name
    })
    if(res.data.level=='success'){
      this.vipList=res.data.data.user_vip_list
    }
    this.loading=false
  },
    deleteDonateRecord(id){
			//删除捐赠记录
			const judge= this.$confirm('删除该捐赠记录?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.deleteDonateRecord({id});
					if(res.data.level=='success'){
						this.donateList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
    },
    async donateList(){
      //获取列表
      const res= await this.$api.donateList({
        limit:16,
        page:this.page
      })
      if(res.data.level=='success'){
        this.users=res.data.data
        this.totalPage=res.data.total
      }
    },
    pageChange(e){
			//翻页
			this.page=e;
			this.donateList()
		},
    async addDonateRecord(){
      //新增
      const res=await this.$api.addDonateRecord({
        name:this.addForm.name,
        money:this.addForm.price,
        vip_id:this.addForm.person,
        time:this.addForm.donateTime,
        remark:this.addForm.desc
      })
      if(res.data.level=='success'){
          this.dialogVisible=false;
          this.$message({
            type:'success',
            message:res.data.message
          })
          this.donateList()
      }else{
          this.$message({
            type:'error',
            message:res.data.message
          })
      }
    },
    initData(){
      // this.executorList=[];
      this.addForm={//弹窗的信息
        name:'',
        price:'',//估价
        // is_vip:1,//是否是商会内部
        person:'',//捐赠人
        donateTime:'',//捐赠时间
        desc:'',
      }
    }
  },
  mounted() {
    this.donateList()
    },
}
</script>
<style lang='scss' scoped>
  .payRule{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
  }
</style>

<style>

	
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

 .payRule .el-dialog__body{overflow: auto;}
</style>
